<template>
<div class="myDeploy">
    <el-steps :active="active" align-center>
      <el-step title="投放位置"></el-step>
      <el-step title="投放物料"></el-step>
      <el-step title="投放计划"></el-step>
      <el-step title="投放预算"></el-step>
      <el-step title="提交审核"></el-step>
    </el-steps>
    <div class="pageOll">
      <div class="page1" v-if="active === 0">
        <!-- 投放位置 -->
        <putPosition></putPosition>
      </div>
      <div class="page2" v-if="active === 1">
        <!-- 投放物料 -->
        <putMaterial></putMaterial>
      </div>
      <div class="page3" v-if="active === 2">
        <!-- 投放计划 -->
       <putPlan></putPlan>
      </div>
      <div class="page4" v-if="active === 3">
        <!-- 投放预算 -->
        <budget></budget>
      </div>
      <div class="page5" v-if="active === 4">
        <!-- 提交审核 -->
        <UE></UE>
      </div>
      <div class="Btn">
        <el-button @click="prev" v-if="active==2||active==3||active==1">上一步</el-button>
        <el-button @click="next" v-if="active==1||active==2||active==0">下一步</el-button>
        <el-button  @click="tijiao" v-if="active==3">提交审核</el-button>
      </div>
    </div>
</div>
</template>
<script>
import UE from './ewe.vue'  //提交审核
import budget from './budget.vue' //投放预算
import putPosition from './putPosition.vue'  // 投放位置
import putPlan from './putPlan.vue' //投放计划
import putMaterial from './putMaterial.vue' //投放计划


export default {
  components: {
    UE,
    budget,
   putPosition,
    putPlan,
    putMaterial
  },
  data(){
    return{
      active:0,
    }
  },
  methods:{
    prev(){
      --this.active;
      if(this.active < 0){
        this.active = 0
      }
    },
    next(){
      if(this.active++ > 4) this.active = 0;
    },
    tijiao(){
      this.active = 4;
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" >
.myDeploy{
  position: relative;

  .el-row{
   display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  img{
    max-width: 100%;
    height: auto;
    display: inline-block;
  }
  .Btn{
    text-align: center;
    margin-top: 20px;
    .el-button{
      background: #ff8b00;
      color: #fff;
      border: none;
      padding: 12px 39px;
    }
  }
  .pageOll{
    background: #fff;
    border-radius: 8px;
    padding: 6%;
    margin-top: 40px;
    .el-button{
        background: #ff8b00;
        border: none;
        color:#fff;
      }
    .page1{

      .el-col{
        padding-left: 0 !important;
        padding-right: 0 !important;
        &.el-col-8{
          box-shadow: 0px 5px 5px #e8e8e8;
          border-radius: 8px;
          .title{
              padding: 15px ;
              h4{
                padding: 0;
                margin-bottom: 10px;
                color: #fff;
                font-size: 20px;
              }
              p{
                color: #fff;
                padding: 5px 0;
                span{
                  display: inline-block;
                  padding: 3px 10px;
                  background: #fff;
                  border-radius: 15px;
                  color: #ff8b00;
                }
              }
          }
        }
      }
    }
    .page3{
      .el-table{
        border: 1px solid #ebeef5;
        border-bottom: none;
        border-radius: 8px;
        text-align: center;
        margin: 30px 0;
        .el-table__header-wrapper thead tr{
          background-color: #faf8f5;
          th{
            background-color: #faf8f5;
            text-align: center;
            color: #666;
          }
        }
      }
    }
  }
  .el-steps.el-steps--horizontal{
    position: absolute;
    width: 100%;
    top: -30px;
  }
  .el-step.is-center{
     .el-step__line{
       height: 13px;
       background: url(/../static/images/yin1_06.png);
           top: 24px;
     }
     .el-step__icon.is-text{
        background: url(/../static/images/yinH_03.png) no-repeat center;
        background-size: cover;
        width: 56px;
        height: 56px;
        border:none;
        font-size: 26px;
     }
     .el-step__title.is-process,.el-step__title.is-finish{
       color: #ff8b00;
     }
     .is-finish{
       .el-step__line-inner{
          border-width: 1px;
          width: 100% !important;
          height: 3px;
          background: #ff8b00;
          border: none;
          top: 5px;
          position: absolute;
       }
     }
     .is-process,.is-finish{
       .el-step__icon-inner{
         color: #fff;
         width: 40px;
         height: 40px;
         background: #ff8b00;
         border-radius: 50%;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
       }
     }
  }
}
@media screen and (max-width: 1200px){
  .myDeploy .pageOll{padding: 10% 5%;}
}
@media screen and (max-width: 768px) {
  .myDeploy .pageOll .page1 .el-col{width: 100%;}
  .myDeploy .el-row{display: block}
  #allmap{height: 300px !important;margin-bottom: 16px;}
  .el-step__title{font-size: 12px;}
  .el-form-item {margin-bottom: 15px;}
  .budget p{margin: 20px 0;line-height: 1.8em;}
  .myDeploy .Btn .el-button{margin-bottom: 12px}
}
@media screen and (max-width: 460px) {
  .myDeploy .pageOll{padding: 80px 15px;}
}
</style>
